<template>
  <div class="questions-list">
    <!-- 基础题库卡片区域 -->
    <el-card class="question-list-card">
      <!-- 新增试题按钮 -->
      <el-button
        class="addquestions-btn"
        type="success"
        icon="el-icon-edit"
        @click="addNewQuestion"
        >新增试题</el-button
      >
      <!-- 筛选区域 -->
      <el-form
        class="question-filtrate"
        ref="formRef"
        :model="form"
        label-width="80px"
      >
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                @change="subjectChange()"
                v-model="form.subjectID"
                placeholder="请选择"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in subjectList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select
                @change="labelChange"
                v-model="form.catalogID"
                placeholder="请选择"
              >
                <el-option
                  :label="item.directoryName"
                  :value="item.id"
                  v-for="(item, index) in directoryList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select v-model="form.tags" placeholder="请选择">
                <el-option
                  :label="item.tagName"
                  :value="item.id"
                  v-for="(item, index) in tagnameList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="form.questionType" placeholder="请选择">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简答" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select v-model="form.direction" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="index"
                  v-for="(item, index) in direction"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select v-model="form.creatorID" placeholder="请选择">
                <el-option
                  :label="item.creator"
                  :value="item.id"
                  v-for="(item, index) in tableData"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-col :span="12">
                <el-select
                  @change="cityChange"
                  v-model="form.province"
                  placeholder="请选择"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in provinces"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select v-model="form.city" placeholder="请选择">
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in citys"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="basicBTN">
            <el-form-item>
              <el-button @click="clearform">清除</el-button>
              <el-button type="primary" @click="searchQuestion">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据总数 -->
      <div class="total">
        <i class="el-icon-info"></i>
        <span>数据一共{{ tableData.length }}条</span>
      </div>
      <!-- 列表区域 -->
      <el-table
        ref="tableRef"
        class="questionsList"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="number" label="试题编号"> </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
            {{
              scope.row.questionType == 1
                ? "单选"
                : scope.row.questionType == 2
                ? "多选"
                : "简答"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间"></el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template slot-scope="scope">
            {{
              scope.row.difficulty == 1
                ? "简单"
                : scope.row.questionType == 2
                ? "一般"
                : "困难"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              plain
              circle
              @click="preview(scope.row.questionType, scope.row.id)"
            >
            </el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-edit"
              plain
              circle
              @click="jumpAdd(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="delQuestionsList(scope.row.id)"
            ></el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-check"
              circle
              plain
              @click="joinSelect(scope.row.id)"
            ></el-button>
            <!-- dialog区域 -->
            <el-dialog
              title="题目预览"
              :visible.sync="dialog"
              width="50%"
              @closedialog="this.dialog = false"
            >
              <dialogComponent
                ref="questionsCom"
                :questionType="questionType"
                :previewlist="previewlist"
              ></dialogComponent>
              <el-row class="confirm">
                <el-button
                  class="confirmBtn"
                  type="primary"
                  @click="closedialog"
                  >关 闭</el-button
                >
              </el-row>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="pagetool">
        <PageTool :total="this.counts" :paginationPage='this.pages' :paginationPagesize="this.pagesize"></PageTool>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getQuestionsList,
  getSubjectList,
  getmulu,
  getbiaoqian,
  afterSearch
} from "@/api/hmmm/questions";
import { createAPI } from "@/utils/request";
import dialogComponent from "@/module-hmmm/components/questions-preview";
import { provinces, citys } from "@/api/hmmm/citys";
import PageTool from "@/module-dashboard/components/pageTool";
export default {
  components: {
    dialogComponent,
    PageTool
  },
  data() {
    return {
      form: {
        subjectID: "",
        catalogID: "",
        tags: "",
        keyword: "",
        questionType: "",
        difficulty: "",
        direction: "",
        creatorID: "",
        remarks: "",
        shortName: "",
        province: "",
        city: ""
      },
      tableData: [],
      subjectList: [],
      dialog: false,
      questionType: "",
      previewlist: {},
      videoUrl: "",
      // 二级目录列表
      directoryList: [],
      tagnameList: [],
      direction: [
        "o2o",
        "外包服务",
        "企业服务",
        "互联网金融",
        "企业咨询",
        "互联网",
        "电子商务",
        "其他"
      ],
      provinces: provinces(),
      citys: [],
      counts: null,
      pages: null,
      pagesize: null
    };
  },
  created() {
    this.getQuestions();
    this.getSimpleList();
  },
  mounted() {},
  methods: {
    // 加入精选
    async joinSelect(id) {
      const result = await this.$confirm(
        "此操作将该题目加入精选, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);

      if (result !== "confirm") {
        this.$message.info("取消精选");
      } else {
      const { data } = await createAPI(`/questions/choice/${id}/1`,'PATCH')
      this.$message.success('加入精选题库成功')
      this.$router.push({path:'/questions/choice'})
      }
    },
    cityChange(item) {
      this.citys = citys(item);
      console.log(item, "city");
      console.log(this.provinces, "11111");
    },
    // 获取基础题库列表
    async getQuestions() {
      const { data } = await getQuestionsList();
      console.log(data);
      this.tableData = data.items;
      this.counts = data.counts
      this.pages = data.pages
      this.pagesize = data.pagesize
    },
    async getSimpleList() {
      const { data } = await getSubjectList();
      console.log(data);
      this.subjectList = data;
    },
    async subjectChange() {
      this.directoryList = [];
      this.form.catalogID = "";
      const { data } = await getmulu({ subjectID: this.form.subjectID });
      console.log(data);
      this.directoryList = data.items;
    },
    // 获取标签列表
    async labelChange() {
      this.tagnameList = [];
      this.form.tags = "";
      const { data } = await getbiaoqian({ subjectID: this.form.subjectID });
      console.log(data);
      this.tagnameList = data.items;
    },
    // 点击打开预览弹框
    async preview(num, id) {
      this.dialog = true;
      this.questionType = num;
      const { data } = await createAPI(`/questions/${id}`, "GET");
      // console.log(data);
      this.previewlist = data;
      // console.log(data.videoURL);
    },
    // 关闭弹窗
    closedialog() {
      this.$refs.questionsCom.isvideoshow = false;
      this.dialog = false;
    },
    // 删除题库
    async delQuestionsList(id) {
      const result = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);

      if (result !== "confirm") {
        this.$message.info("取消删除");
      } else {
        const { data } = await createAPI(`/questions/${id}`, "DELETE");
        console.log(data);
        this.getQuestions();
        this.$message.success("删除成功");
      }
    },
    // 清空表单
    clearform(formRef) {
      this.$refs["formRef"].resetFields();
      this.form.city = "";
      this.getQuestions()
    },
    // 搜索功能
    async searchQuestion() {
      console.log(123);
      const { data } = await afterSearch({
        subjectID: this.form.subjectID,
        catalogID: this.form.catalogID,
        tags: this.form.tags,
        keyword: this.form.keyword,
        questionType: this.form.questionType,
        difficulty: this.form.difficulty,
        direction: this.form.direction,
        creatorID: this.form.creatorID,
        remarks: this.form.remarks,
        shortName: this.form.shortName,
        province: this.form.province,
        city: this.form.city
      });
      console.log(data);
      this.tableData = data.items;
    },
    addNewQuestion() {
      // { path: '/dashboard' }
      this.$router.push({ path: "/questions/new" });
    },
    jumpAdd(message) {
      this.$router.push({
        name: "questions-new",
        query: {id:message.id}
      });
    }
  }
};
</script>

<style scoped lang="scss" scoped>
.question-list-card {
  position: relative;
  margin: 20px 14px 14px;
  background-color: #fff;
  .addquestions-btn {
    position: absolute;
    right: 26px;
    width: 120px;
    height: 40px;
  }
  .question-filtrate {
    margin-top: 60px;
  }
  .total {
    width: 1200px;
    height: 44px;
    background-color: #f4f4f5;
    .el-icon-info {
      margin-left: 18px;
      line-height: 44px;
      padding-right: 10px;
    }
  }
  .questionsList {
    margin-top: 22px;
  }
}
.confirm {
  text-align: center;
}
.pagetool {
  text-align: right;
  margin-top: 15px;
}
.basicBTN {
  text-align: right;
}
</style>
